<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#div1{
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: red;
				left: 100px;
				top: 100px;
			}
		</style>
	</head>

	<body>
		<div id="div1"></div>
		<script>
	   class zhuai{
	   	   construcor(){
	   	   	  this.div1 = document.getElementById("div1");　　	   	   	  
	   	   }
	   	   
	   	   show(){   	
	   	   	    div1.onmousedown = function(ev) {　　　　
	   	   		var oevent = ev || event;　　　
	   	   		var distanceX = oevent.clientX - div1.offsetLeft;　　　　
	   	   		var distanceY = oevent.clientY - div1.offsetTop;	　　　　
	   	   		document.onmousemove = function(ev) {　　　　　　
	   	   			var oevent = ev || event;　　　　　　
	   	   			div1.style.left = oevent.clientX - distanceX + 'px';　　　　　　
	   	   			div1.style.top = oevent.clientY - distanceY + 'px';　　　　
	   	   		};　　　　
	   	   		document.onmouseup = function() {　　　　　　
	   	   			document.onmousemove = null;　　　　　　
	   	   			document.onmouseup = null;　　　　
	   	   		};　　
	   	   	  };
	   	   }
	   	   
	   }
			window.onload = function(){
				var n = new zhuai();
				n.show()
			}
		</script>

	</body>

</html>